<template>
  <div>
    <!-- 条件查询。 inline 属性设置表单变为行内的表单域 -->
    <el-form
      ref="searchForm"
      :inline="true"
      :model="searchMap"
      style="margin-top: 20px;"
    >
      <!-- 有prop才可以重置 -->
      <el-form-item prop="name">
        <el-input
          v-model="searchMap.name"
          placeholder="用户名称"
          style="width: 200px;"
        ></el-input>
      </el-form-item>
      <el-form-item prop="birthday">
        <!-- value-format 是指定绑定值的格式 -->
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="searchMap.birthday"
          type="date"
          placeholder="出生日
期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData"
          >查询</el-button
        >
        <el-button @click="resetForm('searchForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表-->
    <!-- :data 绑定渲染的数据；border: 边框; -->
    <el-table :data="list" height="380" border style="width: 100%">
      <!--type="index" 获取索引值，从1开始； label 显示的标题; prop 数据字段名； width 列的宽度 -->
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="60"
      ></el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="用户名称"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="age"
        align="center"
        label="年龄"
        width="60"
      ></el-table-column>
      <el-table-column
        prop="birthday"
        align="center"
        label="出生日期"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        label="手机号码"
        width="120"
      ></el-table-column>
      <el-table-column prop="address" label="住址"></el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleDele(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页，添加在div里面 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import userApi from "@/api/user";

export default {
  data() {
    return {
      list: [],
      total: 0, // 总记录数
      currentPage: 1, // 当前页, 默认第1页
      pageSize: 10, // 每页显示条数， 10条
      searchMap: {
        // 条件查询绑定的条件值
        name: "",
        birthday: ""
      }
    };
  },
  // 钩子函数获取数据
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 调用分页方法查询, 不要少了 this
      userApi
        .search(this.currentPage, this.pageSize, this.searchMap)
        .then(response => {
          const reqs = response.data;
          this.total = reqs.data.total;
          this.list = reqs.data.rows;
          console.log(this.total, this.list);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    // 表单重置，
    // 在 el-form-item 标签属性 prop 上, 指定了字段名, 重置才会生效
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleEdit(id) {
      alert("编辑ID：" + id);
    },
    handleDele(id) {
      alert("删除ID：" + id);
    }
  }
};
</script>
